<template>
  <div class="item1">
    <div class="breadcrumb" :gutter="24">
      <el-form ref="form" label-width="70px" size="small">
        <el-row :gutter="28">
          <div class="btngroup" style="padding-right:15px;float:right">
            <el-button type="primary" size="small" @click="handleAdd()">{{ $t("common.add") }}</el-button>
            <!-- <el-button type="primary" size="small" @click="handleEdit()">{{ $t("common.edit") }}</el-button> -->
            <el-button type="primary" size="small" @click="handleDel()">{{ $t("common.remove") }}</el-button>
          </div>
        </el-row>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="tableAuto">
      <el-table :data="tableData" style="width:100%" :height="height" @row-click="rowClick" border stripe
        :header-cell-style="{background:'#EAEBEC'}" v-loading="tableLoading" ref="refTable" highlight-current-row @sort-change='sortChange'>
        <el-table-column label="" width="50" align="center">
          <template slot-scope="scope">
            <div>
              <el-radio :label="scope.row.fid" v-model="radioId">&nbsp;</el-radio>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" :label="$t('common.number')" width="90" align="center">
          <template slot-scope="scope">
            {{table_index(scope.$index+1)}}
          </template>
        </el-table-column>
        <el-table-column prop="name" show-overflow-tooltip :label="$t('basic.stage')" width="200" sortable='custom'>
          <template slot-scope="scope">
            {{scope.row.phaseDefineVo ? scope.row.phaseDefineVo.name : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="description" show-overflow-tooltip :label="$t('common.describe')">
          <template slot-scope="scope">
            {{scope.row.phaseDefineVo ? scope.row.phaseDefineVo.description : ''}}
          </template>
        </el-table-column>
        <el-table-column prop="phaseType" show-overflow-tooltip :label="$t('basic.stage_type')">
          <template slot-scope="scope">
            {{scope.row.phaseType ? scope.row.phaseType : ''}}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-area">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 30, 50, 100]"
        :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
      </el-pagination>
    </div>

    <el-dialog v-dialogDrag :title="title == 1 ? $t('common.add') :  $t('common.edit')" :visible.sync="isShowDialog"
      :close-on-click-modal="false" :width="screenWidth > 1024 ? '30%' : '50%'" class="isShowDialog" :before-close="handleClose">
      <el-form :model="formData" label-width="105px" ref="ruleForm" size="small" :hide-required-asterisk="true">
        <el-row :gutter="35">
          <!-- <el-col :xs="24">
                      <el-form-item label="名称" prop="name">
                        <el-input v-model="formData.name" placeholder="" clearable></el-input>
                      </el-form-item>
                    </el-col> -->
          <el-col :xs="24">
            <el-form-item :label="$t('basic.system_phase')">
              <el-select v-model="formData.sysPhaseDefineId" remote filterable placeholder="" multiple clearable>
                <el-option v-for="(item,index) in sysPhaseList" :key="index" :label="item.name" :value="item.fid"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item :label="$t('basic.custom_phase')">
              <el-select v-model="formData.phaseDefineId" remote filterable placeholder="" multiple clearable>
                <el-option v-for="(item,index) in phaseList" :key="index" :label="item.name" :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24">
                      <el-form-item label="阶段序列号" prop="sn">
                        <el-input v-model="formData.sn" disabled placeholder="" clearable></el-input>
                      </el-form-item>
                    </el-col> -->
          <!-- <el-col :xs="24">
                      <el-form-item label="描述" prop="description">
                        <el-input type="textarea" v-model="formData.description" placeholder="" clearable></el-input>
                      </el-form-item>
                    </el-col> -->
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleCreate('ruleForm')"
          :loading="loading">{{ $t("common.preservation") }}</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { configure } from "@/api/configure"
import { phaseType } from "@/utlis/phaseData"
export default {
  props: {
    parentFid: String
  },
  data () {
    return {
      screenWidth: document.body.clientWidth,
      height: 32 * 11.4,
      tableData: [],
      tableLoading: false,
      isShowDialog: false,
      loading: false,
      formData: {
        // name:"", //阶段名称
        // description:"", //阶段描述
        phaseDefineId: [],//阶段类型
        sysPhaseDefineId: [],
        // sn:"", //阶段序列号
      },
      phaseList: [],
      sysPhaseList: [],
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        field: '',
        order: ''
      },
      formPhaseData: {
        keyword: "",
        pageNum: 1,
        pageSize: 200
      },
      radioId: "",
      title: 1,
      rules: {
        // name:[{ required: true, message: '阶段名称不能为空', trigger: 'blur' }],
        phaseDefineId: [{ required: true, message: '阶段列表不能为空', trigger: 'change' }],
      },
      currObj: {}
    }
  },
  created () {
    this.getPhaseDefineList()
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = Number(val)
    },
    parentFid (val) {
      this.getEqpClassPhaseLinkList()
    }
  },
  mounted () {
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth;
    })
  },
  methods: {
    handleSearch () {
      this.pager.pageNum = 1;
      this.getEqpClassPhaseLinkList()
    },
    getEqpClassPhaseLinkList () {
      const param = {
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        field: this.pager.field,
        order: this.pager.order,
        eqpClassId: this.parentFid
      }
      this.tableLoading = true
      configure.getEqpClassPhaseLinkList(param).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
        }
        this.tableLoading = false
      })
    },
    rowClick (row) {
      this.radioId = row.fid
      this.currObj = row;
      this.$refs.refTable.setCurrentRow(row);
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.pager.field = column.prop
        this.pager.order = 'DESC'
      } else {
        this.pager.field = column.prop
        this.pager.order = 'ASC'
      }
      this.pager.pageNum = 1
      this.getEqpClassPhaseLinkList()
    },
    handleAdd () {
      if (this.parentFid === '') {
        this.$message.error('请选择设备类型');
        return
      }
      try {
        this.formData = {
          phaseDefineId: [],//阶段类型
          sysPhaseDefineId: [],
        }
        this.$refs['ruleForm'].resetFields();
      } catch (e) { }
      this.title = 1
      this.isShowDialog = true
    },
    handleEdit () {
      if (this.radioId === '') {
        this.$message.error(this.$t('dialog.please_sel_edit'));
        return
      }
      this.title = 2
      let copyRow = this.tableData.find(item => item.fid == this.radioId)
      this.formData = {
        // name:copyRow.phaseDefineVo.name, //阶段名称
        description: copyRow.phaseDefineVo.description, //阶段描述
        // phaseDefineId: copyRow.phaseDefineVo.fid,//阶段类型
        // sn:copyRow.phaseDefineVo.sn, //阶段序列号
        // sysPhaseDefineId: copyRow.phaseDefineId.fid
      }
      this.isShowDialog = true
    },
    handleDel () {
      if (this.radioId === '') {
        this.$message.error(this.$t('dialog.please_sel_del'));
        return
      }
      let that = this
      this.currObj.phaseDefineVo = this.currObj.phaseDefineVo || {}
      this.$customConfirm({
        content: "请确认是否删除设备阶段" + this.currObj.phaseDefineVo.name,
        onok () {
          configure.eqpClassPhaseLinkRemove(that.radioId).then(res1 => {
            if (res1.code == 200) {
              that.radioId = ""
              that.getEqpClassPhaseLinkList()
              that.$message({ duration: 1000, type: 'success', message: '删除成功!' });
            } else {
              that.$message.error(res1.msg);
            }
          })
        }
      });

    },
    handleCreate (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = [];
          let selPhaseId = this.formData.sysPhaseDefineId.concat(this.formData.phaseDefineId)
          let repeatPhase = []
          let that = this

          // if (this.title == '添加') {

          selPhaseId.forEach(key => {
            if (key != undefined) {
              param.push(
                {
                  eqpClassId: this.parentFid,
                  phaseDefineId: key,
                }
              );

              //判断是否已经添加了
              that.tableData.forEach(ii => {
                if (ii.phaseDefineId == key) {
                  repeatPhase.push(ii.phaseDefineVo.name)
                }
              })
            }

          })

          if (repeatPhase.length > 0) {
            this.$message.error('已经添加了' + repeatPhase.join());
            return
          }
          // }

          // const param = {
          //   eqpClassId: this.parentFid,
          //   ...this.formData,
          //   // phaseDefineVo:{
          //   //     ...this.formData,
          //   // }
          // }
          // if (this.title == 2) {
          //   param.phaseDefineId = this.currObj.phaseDefineId
          //   param.fid = this.currObj.fid
          // }
          this.loading = true
          configure.eqpClassPhaseLinkAdds(param, this.title).then(res => {
            this.loading = false
            if (res.code == 200) {
              this.$message({ duration: 1000, type: 'success', message: '添加成功' });
              this.getEqpClassPhaseLinkList()
              this.formData = {
                // name:'', //阶段名称
                // description:'', //阶段描述
                phaseDefineId: [],//阶段类型
                sysPhaseDefineId: [],
                // sn:'', //阶段序列号
              }
              this.isShowDialog = false
              try {
                this.$refs['ruleForm'].resetFields();
              } catch (e) { }
            } else {
              this.$message.error(res.msg);
            }
          }).catch(e => {
            this.loading = false
            this.$message.error('服务器繁忙,请稍后再试');
          })
        }
      })
    },
    getPhaseDefineList () {
      const param = {
        name: this.formPhaseData.keyword,
        page: this.formPhaseData.pageNum,
        size: this.formPhaseData.pageSize,
        field: 'name',
        order: 'ASC',
      }
      configure.getPhaseDefineList(param).then(res => {
        if (res.code == 200) {
          let list = res.data.rows.filter(item => {
            return item.state === 0
          })

          list.forEach(ii => {
            if (ii.type == 3 || ii.type == 4 || ii.type == 5 || ii.type == 6 || ii.type == 9 || ii.type == 10 || ii.type == 11) {
              this.sysPhaseList.push(ii)
            } else {
              this.phaseList.push(ii)
            }
          })
        }
      })
    },
    handleClose () {
      this.isShowDialog = false
      this.$refs['ruleForm'].resetFields();
    },
    handleSizeChange (val) {
      this.pager.pageNum = 1
      this.pager.pageSize = val
      this.getEqpClassPhaseLinkList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.getEqpClassPhaseLinkList()
    },
    handlePhase (val) {
      this.formData.sn = this.phaseType.find(item => item.id == val).code
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
    loadMoreFun () {
      this.formPhaseData.pageNum++
      this.getPhaseDefineList()
    },
    //远程搜索配方名称
    remoteMethod (keyword) {
      this.formPhaseData.keyword = keyword.trim();
      this.formPhaseData.pageNum = 1
      setTimeout(() => {
        this.phaseList = []
        this.sysPhaseList = []
        this.getPhaseDefineList()
      }, 200)
    },
  }
}
</script>

<style scoped>
.btngroup {
  float: left;
}
.change >>> .iconfont {
  font-size: 13px !important;
}
.titmepicker >>> .el-date-editor {
  width: 100%;
}
.titmepicker >>> .el-date-editor .el-range-separator {
  width: 8%;
}
.isShowDialog >>> .el-select {
  width: 100%;
}
.tableAuto,
.cardBox {
  clear: both;
}
.pagination-area {
  padding: 10px;
  border: 1px solid #eaebec;
  border-top: none;
}
.Desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardBox {
  overflow-y: auto;
}
.card {
  background: #eaebec;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 3px;
}
.card p {
  font-size: 12px;
  line-height: 22px;
  transform: scale(0.9);
}
.desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title {
  font-weight: bold;
}
.selectCard {
  background: #f6fbff;
}
@media only screen and (min-width: 1200px) {
  .el-col-lg-5 {
    width: 19.83333%;
  }
}
.item1 >>> .el-row {
  margin: 0 !important;
}
</style>
